<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据表格的重载 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/stv/admin/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/stv/admin/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="{{url('admin/console')}}">主页</a>
        <a><cite>内容管理</cite></a>
        <a><cite>单独页面</cite></a>
    </div>
</div>

<div class="layui-fluid layui-form-pane" >
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-breadcrumb" lay-filter="breadcrumb">
                        <a lay-href="{{url('admin/console')}}">主页</a>
                        <a><cite>内容管理</cite></a>
                        <a><cite>单独页面</cite></a>
                    </div>
                </div>

                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">



                        <div class="layui-inline">
                            <label class="layui-form-label layui-hide-md">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" class="layui-input"
                                       placeholder="标题,如:头部广告" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label layui-hide-md">位置</label>
                            <div class="layui-input-inline" style="width:140px">
                                <select  name="type">
                                    <option value="">按位置搜索</option>
                                    <option value="1">首页轮播图</option>
                                    <option value="2">新品特价</option>
                                </select>
                            </div>
                        </div>



                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-app-contlist-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                            </button>
                            <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
                        </div>
                    </div>
                </div>


                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
                    <script type="text/html" id="test-table-operate-barDemo">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-xs" lay-event="edit">修改</button>
                            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
                        </div>
                    </script>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="/static/stv/admin/layuiadmin/layui/layui.js?{{time()}}"></script>
<script src="/static/stv/admin/js/admin.common.js?{{time()}}"></script>
<script>
    var index_url='{:url('admin/single/index')}';  //列表
    var add_url='{:url('admin/single/add')}';       //添加
    var edit_url='{:url('admin/single/edit')}';   //编辑
    var del_url='{:url('admin/single/del')}';      //删除
    var optgg_url='{:url('admin/single/optgg')}';    //重置google
    var role_url='{:url('admin/single/change_role')}';  //用户选择角色
    var change_url='{:url('admin/single/change_status')}'; //修改用户状态
    layui.config({
        base: '/static/stv/admin/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;
        var table = layui.table;

        //=========================表单搜索搜索========================
        form.on('submit(LAY-app-contlist-search)', function(data){

            var field = data.field;
            console.log(field);
            //
            // //执行重载
            table.reload('test-table-reload', {
                where: field
            });
        });
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //===================表格渲染========================
        table.render({
            elem: '#test-table-reload'
            ,url: index_url
            ,method:'post'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:80, sort: true}
                ,{field:'key', title: '关键字', width:120, sort: true}
                ,{field:'title', title: '标题', width:120, sort: true}
                ,{field:'description', title: '摘要', width:220, sort: true}
                , {field: 'status', title: '状态', width: 80, sort: true, fixed: 'right', templet: temp_switch_tpl}
                ,{width:220, title: '操作',align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
            //进行按钮操作
            ,page: true
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });
//监听工具条
        table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'role'){ //查看
                //提交数据
                var index = layer.open({
                    type: 2
                    , title: '分配角色:' + data.account
                    , content: role_url + "?id=" + data.id
                    , area: ['500px', '330px'] //宽高
                    , maxmin: true
                    , scrollbar: true
                    , end: function (index, layero) {
                        //关闭弹窗后的事件
                    }
                });

                //do somehing
            } else if(layEvent === 'del'){ //删除

                layer.confirm('确定删除吗?', function (index) {
                    //提交数据
                    var o = {id: data.id};
                    $.post(del_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                //重新刷新父窗口的数据区
                                table.reload('test-table-reload'); //重载表格
                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    },'json');

                    //关闭自身提示框
                    layer.close(index);
                });

            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: '编辑:'+data.title,
                    shade: false,
                    area: ['70%', '600px'], //宽高
                    content: edit_url+'?id='+data.id,
                    zIndex: layer.zIndex //重点1
                    ,btn: ['保存', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                    ,success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });
            }else if (obj.event === 'opgg') {

                //提交数据
                layer.confirm('确定要重置OTP绑定?', function (index) {
                    //提交数据
                    var o = {id: data.id};
                    $.post(optgg_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                //重新刷新父窗口的数据区
                                table.reload('test-table-reload'); //重载表格
                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    },'json');

                    //关闭自身提示框
                    layer.close(index);
                });

                //关闭自身提示框

            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#test-table-reload');
                //执行重载
                table.reload('test-table-reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        uid: demoReload.val()
                    }
                });
            },
            add: function(){
                layer.open({
                    type: 2
                    ,title: '添加用户'
                    ,content: add_url
                    ,maxmin: true
                    ,area: ['750px', '600px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                });
            }
        };

        form.on('switch(component-switch)', function (obj) {
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            console.log(json);
            var name = obj.elem.name;
            var value = obj.elem.checked === true ? 1 : 0;
            var o = {};
            //数据库更新的主键
            o['id'] = json.id;
            //获取当前点击的checkbox的input名称和值
            o[name] = value;
            console.log(o);
            layer.confirm('确定改变当前状态吗?', function (index) {
                //提交数据，1、提交网址 2、提交数据 3、是否关闭本iframe窗口(在弹出iframe时使用)
                $.post(change_url, o, function (res) {
                    try {
                        if (res.status == 200) {
                            //重新刷新父窗口的数据区
                            table.reload('test-table-reload'); //重载表格
                        } else {
                            layer.msg(res.message);
                        }
                    } catch (e) {
                        layer.msg("异常");
                    }
                },'json');

                //关闭自身提示框
                layer.close(index);
            }, function (index) {
                //按钮【按钮二】的回调
                obj.elem.checked = !obj.elem.checked;
                //重新渲染
                form.render();
            });

            // layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
            //     offset: '6px'
            // });

        });

    });

    function temp_switch_tpl(d){
        if(d.status==1){
            return '<input type="checkbox" name="' + this.field + '" lay-skin="switch" lay-text="开启|关闭" data-json="' + encodeURIComponent(JSON.stringify(d)) + '" lay-filter="component-switch"  checked>';
        }else{
            return '<input type="checkbox" name="' + this.field + '" lay-skin="switch" lay-text="开启|关闭" data-json="' + encodeURIComponent(JSON.stringify(d)) + '" lay-filter="component-switch"  >';
        }

    }
</script>
</body>
</html>
